<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>SCM-WEB</title>
    
    <!-- DNS 预解析 -->
    <link rel="dns-prefetch" href="//fonts.googleapis.com" />
    <link rel="dns-prefetch" href="//cdn.jsdelivr.net" />
    
    <!-- 关键资源预加载 -->
    <link rel="preload" href="/src/style/index.scss" as="style" />
    <link rel="preload" href="/src/style/tailwind.css" as="style" />
    <link rel="preload" href="/src/assets/iconfont/iconfont.css" as="style" />
    
    <!-- 字体预加载 -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    
    <!-- 性能优化：关键 CSS 内联 -->
    <style>
      /* 关键渲染路径的 CSS */
      body {
        margin: 0;
        padding: 0;
        font-family: 'Roboto';
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      
      #app {
        width: 100%;
        height: 100vh;
      }
      
      /* 加载动画 */
      .loading-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
      }
      
      .loading-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #409eff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    </style>
  </head>
  <body>
    <!-- 加载动画 -->
    <div id="loading" class="loading-container">
      <div class="loading-spinner"></div>
    </div>
    
    <div id="app"></div>
    
    <script type="module" src="/src/main.ts"></script>
    
    <!-- 性能监控脚本 -->
    <script>
      // 隐藏加载动画
      window.addEventListener('load', function() {
        const loading = document.getElementById('loading');
        if (loading) {
          loading.style.display = 'none';
        }
      });
      
      // 性能监控
      if ('performance' in window) {
        window.addEventListener('load', function() {
          setTimeout(function() {
            const perfData = performance.getEntriesByType('navigation')[0];
            if (perfData) {
              console.log('页面加载性能:', {
                'DOM 加载时间': perfData.domContentLoadedEventEnd - perfData.domContentLoadedEventStart + 'ms',
                '页面完全加载时间': perfData.loadEventEnd - perfData.loadEventStart + 'ms',
                '首次内容绘制': performance.getEntriesByName('first-contentful-paint')[0]?.startTime + 'ms'
              });
            }
          }, 0);
        });
      }
    </script>
  </body>
</html>
